
<template>
  <div
    v-loading="loading"
    class="semf-content"
  >
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card style="height: calc(100vh - 100px);">
          <el-divider content-position="left" class="vuln-info-title">
            <h5>漏洞说明</h5>
          </el-divider>
          <div class="vuln-info" style="text-indent: 2em">
            {{ info.introduce }}
          </div>
          <el-divider content-position="left" class="vuln-info-title">
            <h5>漏洞信息</h5>
          </el-divider>
          <div class="vuln-info" v-html="vulnInfo" />
          <el-divider content-position="left" class="vuln-info-title">
            <h5>修复方案</h5>
          </el-divider>
          <div class="vuln-info" style="padding:10px" v-html="vulnFix" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <div class="info-title">
            <h4>漏洞信息</h4>
          </div>
          <el-divider style="margin-top: 10px" />
          <div class="info-item_list">
            <ul>
              <li>
                <span>漏洞名称：</span>
                <span>{{ info.name }}</span>
              </li>
              <li>
                <span>漏洞等级：</span>
                <span>{{ info.level.name }}</span>
              </li>
              <li>
                <span>漏洞类型：</span>
                <span>{{ info.type.name }}</span>
              </li>
              <li>
                <span>漏洞来源：</span>
                <span>{{ info.source.name }}</span>
              </li>
              <li>
                <span>创建时间：</span>
                <span>{{ info.create_time | moment }}</span>
              </li>
              <li>
                <span>更新时间：</span>
                <span>{{ info.update_time | moment }}</span>
              </li>
            </ul>
          </div>
        </el-card>
        <el-card class="box-card" style="height: calc(100vh - 355px);">
          <div slot="header" class="clearfix">
            <span>更新记录</span>
          </div>
          <el-timeline>
            <el-timeline-item
              v-for="(item, index) in log"
              :key="index"
              :timestamp="item.updatetime"
              :color="item.status === 'True' ? '#0bbd87' : '#FF5722'"
              placement="top"
            >
              <ul class="log-item">
                <li>
                  <span>操作用户：</span>{{ item.user === "None" ? "系统" : item.user }}
                </li>
                <li>
                  <span> 操作描述： </span>
                  <p>{{ item.description }}</p>
                </li>
              </ul>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import util from '@/utils/util'
export default {
  name: 'VulnShare',
  filters: {
    moment: function(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  data() {
    return {
      info: {
        level: {},
        type: {},
        source: {}
      },
      log: [],
      loading: true
    }
  },
  computed: {
    vulnInfo() {
      return util.htmlDecode(this.info.info)
    },
    vulnFix() {
      return util.htmlDecode(this.info.fix)
    }
  },
  mounted() {
    const key = this.$route.query.key
    if (key) {
      this.$http.get(`/workflow/share/view/${key}`).then(res => {
        if (res.data.code === 0) {
          this.loading = false
          this.info = res.data.data.info
          this.log = res.data.data.log
        } else {
          this.handleError()
        }
      })
    } else {
      this.handleError()
    }
  },
  methods: {
    handleError() {
      this.$alert('鉴权失败', '提示', {
        confirmButtonText: '确定',
        callback: () => {
          this.$router.push(`/login`)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.info-title {
  margin: 10px 0;
}
.info-item_list {
  margin: 5px;
  padding: 3px;
  li {
    margin: 5px 0;
    span {
      margin-right: 3px;
    }
  }
}
.log-item {
  li {
    margin: 5px 0;
  }
}

p {
  margin-top: 2px;
  text-indent: 2em;
}

.vuln-info-title {
  margin: 20px 0 10px 0;
  width: 50%;
}

.vuln-info {
  margin: 20px 10px 30px 10px;
  p {
    text-indent: 2em;
  }
  table {
    border: 1px solid #0094ff;
  }
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  table thead th {
    background-color: #cce8eb;
    width: 100px;
  }
  table tr:nth-child(odd) {
    background: #fff;
  }
  table tr:nth-child(even) {
    background: #f5fafa;
  }
}
.semf-content{
    padding:10px 200px
}
</style>
